<template>
	<view class="home safe-area-inset-bottom">
		<view class="content">
			<!-- 顶部tab栏 -->
			<view class="title" :style="
          'height:' +
          header.height +
          'px;' +
          'padding-top:' +
          header.top +
          'px;padding-bottom:6px'
        ">
				<text @click="tagClick(0)"
					:class="tabIndex == 0 ? 'active title_item home' : 'home title_item'">首页</text>
				<text @click="tagClick(1)" :class="
            tabIndex == 1
              ? 'active title_item recommendation'
              : 'recommendation title_item'
          ">推荐</text>
				<text @click="tagClick(2)" :class="
            tabIndex == 2 ? 'active title_item follow' : 'follow title_item'
          ">关注</text>
			</view>
			<view :style="
          'height:' +
          swiperBoxHeight +
          'px;' +
          'padding-top:' +
          header.allHeight +
          'px'
        ">
				<homeRecommendMain v-on:showHello="showHelloAction" v-on:showRoseGive="showRoseGiveAction"
					v-on:showAuth="showAuthAction" @goCompleteInfo="goCompleteInfo" @goCustomizePage="goCustomizePage"
					ref="homeContent" />
			</view>

			<swiper>
				<!-- 首页 -->
			</swiper>
			<!-- 弹框 -->
		</view>
		<helloGiftView :giftsData="giftsData" :isShow="showHello" v-on:dismiss="helloDismissAction"></helloGiftView>
		<roseGiveDialog :isShow="showRoseGive" v-on:dismiss="showRoseGiveAction"></roseGiveDialog>
		<loginDialog :isShow="isShowLogin" v-on:dismiss="loginDismiss"></loginDialog>
		<!-- 认证弹框 -->
		<authDialog :isShow="showAuth" v-on:close="hideAuthAction" :userName="userName" :avatar="avatar"></authDialog>
		<TabBar :current-page="0" />
	</view>
</template>

<script>
	import {
		EventBus
	} from "@/util/event-bus.js";
	import {
		loadVipinfo
	} from "@/api/user/user.js";
	import homeRecommend from "./components/home_recommend.vue";
	import homeRecommendMain from "./components/home_recommend_main.vue";
	import homeCustomize from "./components/home_recommend_customize.vue";
	import homeFollow from "./components/home_follow.vue";
	import homeRecommendList from "./components/recommend-list.vue";
	/// 关注对话框
	import helloGiftView from "./components/hello-gift-view.vue";
	/// 送花
	import roseGiveDialog from "@/pages/home/components/rose-give-dialog.vue";
	/// 认证弹框
	import authDialog from "@/pages/home/components/auth-dialog.vue";
	export default {
		components: {
			homeRecommend,
			homeRecommendMain,
			homeCustomize,
			homeFollow,
			homeRecommendList,
			helloGiftView,
			roseGiveDialog,
			authDialog,
		},
		onHide() {
			EventBus.$emit("videoStop", true);
			loadVipinfo().then((res) => {
				uni.setStorageSync("vipInfo", res.data);
			});
		},
		data() {
			return {
				scrollTop: 0,
				loadStatus: "loading", //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				header: {
					top: 0,
					height: 0,
					allHeight: 0,
				},
				isShowLogin: false,
				isFirst: false,
				tabIndex: 0,
				didCustomize: false,
				showHello: false,
				showRoseGive: false,
				swiperBoxHeight: 200,
				showAuth: false,
				giftsData: {},
				userName: "",
				avatar: "",
				preIndex: 0,
				noAuth: true,
				isLogin: false,
			};
		},
		created() {
			let that = this;
			const header = uni.getMenuButtonBoundingClientRect();
			console.log("header##### ", header);
			this.header.top = header.top;
			this.header.height = header.height;
			this.header.allHeight = header.top + header.height + 6;
			let isIphoneX = false;
			uni.getSystemInfo({
				success: function(res) {
					let modelmes = res.model;
					if (modelmes.search("iPhone X") != -1) {
						isIphoneX = true;
					}
					that.swiperBoxHeight =
						res.screenHeight -
						that.header.allHeight;
					console.log("that.swiperBoxHeight: " + that.swiperBoxHeight)
				},
			});

			if (uni.getStorageSync("token")) {
				this.isShowLogin = false;
				this.isLogin = true;
			}
			EventBus.$on("didCustomize", function(res) {
				that.didCustomize = true;
				// 修改 已定制
				let userInfo = uni.getStorageSync("userInfo") || {};
				userInfo.customized = true;
				uni.setStorageSync("userInfo", userInfo);
				uni.reLaunch({
					url: "/pages/home2/home",
				});
			});
			EventBus.$on("detailLoginSuccess", function(res) {
				that.isLogin = true;
			});
			// 监听 弹出 登陆
			EventBus.$on("showLogin", function(res) {
				if (that.isLogin === false) {
					that.isShowLogin = true;
				}
			});
		},
		onShareAppMessage(res) {
			console.log(res);
			let userId = res.target.id || "";
			let url = "/pageA/personalHome/personalHome?user_id=" + userId;
			return {
				title: "最近超好玩超火爆的脱单神器,没时间解释啦,快点来看看吧",
				path: url,
			};
		},
		mounted() {
			let userInfo = uni.getStorageSync("userInfo") || {};
			this.didCustomize = userInfo.customized === true;
			let auth = userInfo.certificated || false;
			this.noAuth = auth === false;
		},
		onShow() {
			this.reloadData();
		},
		methods: {
			reloadData() {
				let userInfo = uni.getStorageSync("userInfo") || {};
				this.didCustomize = userInfo.customized === true;
				let auth = userInfo.certificated || false;
				this.noAuth = auth === false;
				this.isLogin = userInfo.codeID != null;
				this.$refs.homeContent.refreshCheckLogin();
			},
			goCompleteInfo() {
				if (!this.isLogin) {
					EventBus.$emit("showLogin");
					return;
				}
				uni.navigateTo({
					url: "/pageA/my-profile/my-profile-once",
				});
			},
			clickLoadMore(e) {
				//   this.moreStatus = e.detail.status;
			},
			goProtocol(type) {
				uni.navigateTo({
					url: "/pageA/protocol/protocol?type=" + type,
				});
			},
			goCustomizePage() {
				this.tagClick(1);
			},
			tagClick(index) {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						icon: "none",
						title: "请登录",
					});
					this.isShowLogin = true;
					return false;
				}
				if (index === 1) {
					// let userInfo = uni.getStorageSync("userInfo") || {};
					// if (!userInfo.certificated && this.isLogin) {
					//   this.toAuth();
					//   return;
					// }
					// this.toAuth()
					this.reloadData();
				}
				this.tabIndex = index;
				this.preIndex = index;
				if (index != 2) {
					EventBus.$emit("videoStop", true);
				}
			},
			toLogin() {
				this.isShowLogin = true;
			},
			// 关闭弹框
			close_layer() {
				this.isShow = false;
			},
			ontabchange(value) {
				let index = value.detail.current;
				let that = this;
				if (index !== 0) {
					if (this.isLogin) {
						this.tabIndex = index;
						// setTimeout(function () {
						//   that.tabIndex = that.preIndex;
						// }, 100);
					} else {
						this.tabIndex = index;
						this.isShowLogin = true;
					}
				} else {
					this.tabIndex = index;
					this.preIndex = index;
				}
			},
			showHelloAction(giftsData) {
				this.showHello = true;
				this.giftsData = giftsData;
				console.log(`giftsData: `, giftsData);
			},
			helloDismissAction() {
				this.showHello = false;
			},
			hideAuthAction() {
				this.showAuth = false;
			},
			showAuthAction(userInfo) {
				this.showAuth = true;
				this.userName = userInfo.userName;
				this.avatar = userInfo.avatar;
			},
			showRoseGiveAction(show) {
				this.showRoseGive = show;
			},
			beforeSwitch(index) {
				if (!uni.getStorageSync("token")) {
					if (index === 2) {
						this.isShowLogin = true;
						return false;
					}
					return true;
				} else {
					let userInfo = uni.getStorageSync("userInfo") || {};
					if (userInfo.nick_name.length === 0) {
						uni.navigateTo({
							url: "/pageA/my-profile/my-profile-once"
						});
						return false;
					}
					return true;
				}
			},
			toAuth() {
				uni.navigateTo({
					url: "/pageA/realName/realName",
				});
			},
			loginDismiss() {
				this.isShowLogin = false;
			},
		},
	};
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	page {
		background-color: #ffffff;
	}

	.home {
		height: 100%;

		.content {
			display: flex;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #474a58;
			position: relative;
			height: 100%;
			flex-direction: column;

			.title {
				display: flex;
				position: fixed;
				box-sizing: content-box;
				width: 100%;
				background-color: #ffffff;
				box-shadow: 0 5px 10px -5px rgba(0, 42, 64, 0.07);
				z-index: 100;

				.title_item {
					font-size: 34rpx;
					line-height: 64rpx;
				}

				.home {
					margin-left: 30rpx;
				}

				.recommendation {
					margin-left: 42rpx;
				}

				.follow {
					margin-left: 30rpx;
				}

				.space {
					margin-left: 34rpx;
				}

				.title_item.active {
					font-weight: 600;
					color: rgba(71, 74, 88, 1);
					background: linear-gradient(90deg,
							rgba(254, 21, 194, 1) 0%,
							rgba(248, 212, 87, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					position: relative;
				}

				.title_item.active::after {
					position: absolute;
					bottom: 0;
					left: 50%;
					margin: 0 auto;
					transform: translateX(-50%);
					content: "";
					width: 100%;
					height: 12rpx;
					padding: 0 4rpx;
					background: rgba(254, 21, 194, 1);
					border-radius: 8rpx;
					opacity: 0.2;
				}
			}

			.swiper_box {
				display: flex;
				flex: 1;

				.swiper_item {
					height: 100%;

					.login_container {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 750rpx;
						height: calc(100vh - 50px);

						.login_btn {
							width: 686rpx;
							height: 80rpx;
							background: linear-gradient(135deg,
									rgba(252, 79, 145, 1) 0%,
									rgba(253, 108, 230, 1) 100%);
							border-radius: 4rpx;
							text-align: center;
							color: #fff;
							line-height: 80rpx;
							margin-bottom: 40rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}

	.safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
